<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta
            name="viewport"
            content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>HELLO，AMAP!</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "630da90e0c38b4088bc441546ee789bf",
        };
    </script>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">

        let map

        //在窗口加载的时候回调
        window.onload = function () {
            //获取当前位置    通道（端口）  JSBridge
            if (window.wuliu) {
                window.wuliu.getLocation()
            }
        }

        //获取结果的回调
        function onLocation(lng, lat) {
            // alert("获取定位信息" + lon)
            //将地图的中心位置设置到当前位置
            map.setCenter([lng, lat]); //设置地图中心点

            let marker = new AMap.Marker({
                icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
                position: [lng, lat],
                offset: new AMap.Pixel(-13, -30)
            });
            marker.setMap(map);

            AMap.plugin(["AMap.PlaceSearch"], function () {
                //构造地点查询类
                var placeSearch = new AMap.PlaceSearch({
                    type: '餐饮服务', // 兴趣点类别
                    pageSize: 5, // 单页显示结果条数
                    pageIndex: 1, // 页码
                    map: map, // 展现结果的地图实例
                    panel: "panel", // 结果列表将在此容器中进行展示。
                    autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                });

                var cpoint = [lng, lat]; //中心点坐标
                placeSearch.searchNearBy('', cpoint, 200, function (status, result) {
                    console.info(JSON.stringify(result))
                    window.wuliu.onPoiListBack(JSON.stringify(result))
                });
            });
        }

        AMapLoader.load({
            key: "95b5c25022f365fbf9cd5877628379fb", //申请好的Web端开发者 Key，调用 load 时必填
            version: "1.4.15", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
        })
            .then((AMap) => {
                map = new AMap.Map("container", {
                    viewMode: '2D', //默认使用 2D 模式
                    zoom: 11, //地图级别
                    center: [116.397428, 39.90923], //地图中心点
                });

            })
            .catch((e) => {
                console.error(e); //加载错误提示
            });
    </script>
</head>
<button onclick="onLocation(106.551787,29.56268)">测试周边数据</button>
<body>
<div id="container"></div>
</body>
</html>